<!-- 饼状图，与柱状图组件共同构成一个概览界面的看板 -->
<template>
    <div ref="chartRef" class="piechart"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  
  // 数据和配置
  const colorList = [
    "#73DDFF",
    "#73ACFF",
    "#FDD56A",
    "#FDB36A",
    "#FD866A",
    "#9E87FF",
    "#58D5FF",
  ];
  
  const option = {
    title: {
      text: "",
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["24%", "45%"],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
        label: {
          show: true,
          position: "outside",
          formatter: "{a|{b}:{d}%}\n{hr|}",
          rich: {
            hr: {
              backgroundColor: "#ccc",
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12],
            },
            a: {
              padding: [-30, 15, -20, 15],
            },
          },
        },
        labelLine: {
          length: 20,
          length2: 30,
          lineStyle: {
            width: 1,
          },
        },
        data: [
          { name: "一月", value: 1.45 },
          { name: "二月", value: 2.93 },
          { name: "三月", value: 3.15 },
          { name: "四月", value: 4.78 },
          { name: "五月", value: 5.93 },
          { name: "六月", value: 5.73 },
        ],
      },
    ],
  };
  
  // 图表容器
  const chartRef = ref(null);
  let myChart = null;
  let timer = null;
  
  // 动态高亮和提示框逻辑
  function startHighlight() {
    let index = 0;
  
    timer = setInterval(() => {
      myChart.dispatchAction({
        type: "hideTip",
        seriesIndex: 0,
        dataIndex: index,
      });
  
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: index,
      });
  
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: index === 0 ? 5 : index - 1,
      });
  
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: index,
      });
  
      index++;
      if (index > 5) {
        index = 0;
      }
    }, 3000);
  }
  
  // 初始化图表
  onMounted(() => {
    myChart = echarts.init(chartRef.value);
    myChart.setOption(option);
    startHighlight();
  });
  
  // 清理定时器和图表
  onUnmounted(() => {
    clearInterval(timer);
    if (myChart) {
      myChart.dispose();
    }
  });
  </script>
  
  <style scoped>
  .piechart {
    width: 100%;
    height: 300px;
  }
  </style>